<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom获取</title>
  </head>
  <body>
    <div class="box1">
      <p id="mp">这是一段文字</p>
      <p class="cls">这是一段文字</p>
      <p class="cls">这是一段文字</p>
    </div>

    <div class="box2">
      <p>这是一段文字</p>
      <p name="pp">这是一段文字</p>
      <p class="cls">这是一段文字</p>
      <p name="pp">这是一段文字</p>
    </div>

    <script>
      //注意: 所有的元素对象获取必须是在页面初始化完成之后,否则得到null
      //0.根据任意选择器来获取指定元素对象
      //特点: 返回NodeList对象(伪数组)
      let p = document.querySelector('.cls') //获取第一个符合条件的元素对象
      console.log(p)
      let ps = document.querySelectorAll('.box1 .cls') //获取所有符合条件的元素对象
      console.log(ps)

      //1.根据id获取元素对象
      //特点: 获取页面中唯一的单个元素对象
      //简写形式:可以直接使用id的名称来当做元素对象使用
      //p = document.getElementById('mp')
      console.log(mp)

      //2.根据class元素对象
      //特点: 获取页面中多个相同class属性名的元素,返回HTMLCollection对象(伪数组)
      //伪数组是一种特殊的数组,具有一些数组的特性,但是不具备数组的全功能函数,所以基础使用没有问题,但是要进行复杂数组操作,需要转换
      //如何转换? Array.from()
      ps = document.getElementsByClassName('cls')
      // Array.from(ps).forEach(x => console.log(x))
      console.log(ps)

      //3.根据标签名称获取元素对象
      //特点: 获取多个元素对象,返回HTMLCollection对象(伪数组)
      ps = document.getElementsByTagName('p')
      console.log(ps)

      //4.根据name属性名称来获取元素对象
      //特点: 获取多个元素对象,一般是表单控件,返回NodeList对象(伪数组),和HTMLCollection对象基本相同,但是多了forEach()功能
      ps = document.getElementsByName('pp')
      console.log(ps)

      //5.其他获取方式
      console.log(document.body) //body
      console.log(document.documentElement) //html
      console.log(document.images) //所有图片
      console.log(document.forms) //所有表单
      console.log(document.links) //所有链接
    </script>
  </body>
</html>
